<template>
    <div class="qrcode-container">
      <canvas ref="qrcodeCanvas"></canvas>
    </div>
  </template>
  
  <script>
  import { defineComponent, onMounted, watch, ref } from 'vue';
  import qrcode from 'qrcode-generator';
  
  export default defineComponent({
    name: 'QrCodeView',
    props: {
      modelValue: {
        type: String,
        required: true,
        default: ''
      },
      width: {
        type: Number,
        default: 200,
        validator: (value) => value > 0
      }
    },
    setup(props) {
      const qrcodeCanvas = ref(null);
  
      // 生成二维码的方法
      const generateQRCode = (text) => {
        if (!text) return;
  
        try {
          // 使用 TextEncoder 进行 UTF-8 编码处理
          const encoder = new TextEncoder();
          const utf8Bytes = encoder.encode(text);
          const utf8Text = Array.from(utf8Bytes).map(byte => String.fromCharCode(byte)).join('');
          
          const qr = qrcode(0, 'L');
          
          // 使用 Byte 模式添加数据
          qr.addData(utf8Text, 'Byte');
          qr.make();
  
          // 获取 canvas 上下文并绘制二维码
          const canvas = qrcodeCanvas.value;
          if (canvas) {
            const ctx = canvas.getContext('2d');
            const qrSize = qr.getModuleCount(); // 获取二维码的模块数量
            const tileSize = Math.floor(props.width / qrSize); // 使用传入的 width 计算模块大小
  
            // 设置 canvas 尺寸
            canvas.width = qrSize * tileSize;
            canvas.height = qrSize * tileSize;
  
            // 清除画布
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
  
            // 绘制二维码
            for (let row = 0; row < qrSize; row++) {
              for (let col = 0; col < qrSize; col++) {
                ctx.fillStyle = qr.isDark(row, col) ? '#000000' : '#ffffff';
                const x = col * tileSize;
                const y = row * tileSize;
                ctx.fillRect(x, y, tileSize, tileSize);
              }
            }
          }
        } catch (error) {
          console.error('二维码生成错误:', error);
          // 如果类型编号不够，尝试自动增加
          if (error.toString().includes('code length overflow')) {
            console.log('尝试更大的QR码类型');
            // 此处可以添加重试逻辑
          }
        }
      };
  
      // 监听 modelValue 的变化
      watch(
        () => props.modelValue,
        (newText) => {
          generateQRCode(newText);
        }
      );
  
      // 组件挂载时生成二维码
      onMounted(() => {
        generateQRCode(props.modelValue);
      });
  
      return {
        qrcodeCanvas
      };
    }
  });
  </script>
  
  <style scoped>
  .qrcode-container {
    display: flex;
    width: 100%;
    height: auto;
  }
  
  canvas {
    border: 1px solid #ccc; /* 可选：添加边框以便更清晰 */
  }
  </style>